<template>
	<block v-if="loading">
		<empty :loading="true"></empty>
	</block>
	<block v-else>
		
		<view>
			
			<collapser :isShow="true" title="监控站房基本设施">
				
				<staffAuth>
					<navigator class="grey" :url="`/pages/monitoringStation/monitoringStationSave2?stationId=${stationId}`" hover-class="op9">
						编辑
						<text class="ml5 sIcon-arrowRight grey"></text>
					</navigator>
				</staffAuth>
				
				<view class="whiteBg" slot="content">
					<view class="grid">
						
						<view class="flex pr50">
							<view class="w80">
								站房面积
							</view>
							<view>
								{{monitorData.area}} ㎡
							</view>
						</view>
						
						<view class="flex" :class="tIndex % 2 == 0 ? 'pl50' : 'pr50' " v-for="( t , tIndex) in showList" :key="t.title">
							<view class="w80">
								{{t.title}}
							</view>
							<view :style="{color : t.color }">
								{{monitorData[t.valueKey]}}
							</view>
						</view>
					</view>
					
					
				</view>
				
			</collapser>
			
			
			<collapser :isShow="true" class="mt10" title="站点运行情况">
				<navigator class="grey" :url="`/pages/maintainRecords/maintainRecordsList?id=${stationId}`" hover-class="op9">
					更多
					<text class="ml5 sIcon-arrowRight grey"></text>
				</navigator>
				
				
				<template slot="content">
					<view class="whiteBg mb5" @tap="toDetail(index)" v-for="( item , index) in maintainList" :key="item.id">
						
						<view class="pd pb10">
							
							<view class="flex">
								<view>
									<text class="main mr10">最近{{item.title}}</text>
								</view>
								<view class="flex rt">
									<view class="grey" v-if="item.hasData">
										{{item.createTime}}
									</view>
									<view class="red" v-else>
										暂无记录
									</view>
									<view class="sIcon-arrowRight fz12 gray ml10"></view>
								</view>
								
							</view>
							
							<block v-if="item.hasData">
								<view class="pt5 fixAutoNoPd">
									<view class="w65">
										<text class="grey mr5">因子</text>
									</view>
									<view>
										<view class="clip">
											{{item.recordsName}}
										</view>
									</view>
								</view>
								<view class="gridNoPd gridNoMb pt5"  v-if="item.deadline">
									<view class="flex lt pt5">
										<view>
											<text class="grey mr10">有效期至</text>
										</view>
										<view>
											{{item.deadline?item.deadline:'--'}}
										</view>
									</view>
									<view class="flex lt pt5">
										<view :class="{'w65':!item.deadline}">
											<text class="grey mr10">结果</text>
										</view>
										<view>
											{{item.result}}
										</view>
									</view>
								</view>
								
								<view class="pt5 fixAutoNoPd" v-else>
									<view class="w65">
										<text class="grey mr5">结果</text>
									</view>
									<view>
										<view class="clip">
											{{item.result}}
										</view>
									</view>
								</view>
								
							</block>
							
							<view class="pt5" v-if="item.hasData">
								
								<view class="gridNoPd gridNoMb">
									<view class="flex lt">
										<view>
											<text class="grey mr10">运维公司</text>
										</view>
										<view>
											{{item.name}}
										</view>
									</view>
									
									<view class="flex lt pt5">
										<view>
											<text class="grey mr5">记录人</text>
										</view>
										<view>
											{{item.recorder}}
										</view>
									</view>
								</view>
								
							</view>
							
						</view>
						
						
						
					</view>
				</template>
				
			</collapser>
			
			
			
			
			
			
			
			
			
			
			<collapser class="mt10" title="废气排放口监测因子">
				<staffAuth>
					<navigator class="grey" :url="`/pages/monitoringFactor/monitoringFactorSave?id=${stationId}&type=${type}`" hover-class="op9">
						添加
						<text class="ml5 sIcon-arrowRight grey"></text>
					</navigator>
				</staffAuth>
				
				<template slot="content">
					
					<view class=" whiteBg  mb10 " v-for="( item , index) in page.list" :key="index">
						
						<view class="pd pb10 father " :class="{'pt30':role == 2}">
							
							<staffAuth>
								<view class="abs top right">
									<view class="flex rt" @tap="remove(item,index)">
										<view class="sIcon-close pr10 pt5"></view>
									</view>
								</view>
							</staffAuth>
							
							<view class="flex ">
								<view>
									<text class="grey mr5">设备监测因子</text>
								</view>
								<view>
									{{item.factor}}
								</view>
							</view>
							<view class="flex pt5">
								<view>
									<text class="grey mr5">量程</text>
								</view>
								<view>
									{{item.range}}
								</view>
							</view>
							<view class="flex pt5">
								<view>
									<text class="grey mr5">限值</text>
								</view>
								<view>
									{{item.limit}}
								</view>
							</view>
							<view class="flex pt5">
								<view>
									<text class="grey mr5">验收时间</text>
								</view>
								<view>
									{{item.acceptanceTime}}
								</view>
							</view>
							<view class="flex pt5">
								<view>
									<text class="grey mr5">联网时间</text>
								</view>
								<view>
									{{item.networkingTime}}
								</view>
							</view>
						</view>
						
						<view class="pd ptb10  bt dashed">
							<view class="flex">
								<view>
									<text class="grey mr5">运维公司</text>
								</view>
								<view>
									{{item.servicerName}}
								</view>
							</view>
							
							<view class="flex pt5">
								<view>
									<text class="grey mr5">记录人</text>
								</view>
								<view>
									{{item.name}}
								</view>
							</view>
						</view>
						
						
						
						
					</view>
					
				</template>
				
			</collapser>
			
			
			<collapser title="系统参数" class="mt10">
				<staffAuth>
					<navigator class="grey" :url="`/pages/sysetemParams/sysetemParamsSave?id=${stationId}`" hover-class="op9">
						编辑
						<text class="ml5 sIcon-arrowRight grey"></text>
					</navigator>
				</staffAuth>
				
				<template slot="content">
					<view class="whiteBg">
						
						<view class="fixAuto bb middle">
							<view class="w100">
								速度场系数
							</view>
							<view>
								{{data.velocityFieldCoefficient}}
							</view>
						</view>
						<view class="fixAuto bb middle">
							<view class="w100 pr0">
								皮托管系数K值
							</view>
							<view class="pl5">
								{{data.kValue}}
							</view>
						</view>
						<view class="fixAuto bb middle">
							<view class="w100">
								过量空气系数
							</view>
							<view>
								{{data.lambda}}
							</view>
						</view>
						
					</view>
				</template>
				
			</collapser>
			
		</view>
		
	</block>
</template>

<script>
	export default {
		name: 'watersInfo',
		data() {
			return {
				monitorData : {},
				maintainList:[] ,
				page : {
					list : [] ,
					lastPage : false ,
					pageNumber : 1 ,
					pageSize : 100
				},
				tList :  [
					{title : "空调" , name : "x.airConditioner|空调|0~200" , valueKey : "airConditioner" } ,
					{title : "消防设施" , name : "x.fireFalicities|消防设施|0~200" , valueKey : "fireFalicities" } ,
					{title : "稳压电源" , name : "x.regulatedPowerSupply|稳压电源|0~200" , valueKey : "regulatedPowerSupply" } ,
					{title : "防雷接地" , name : "x.LightningProtection|防雷接地|0~200" , valueKey : "LightningProtection" } ,
					{title : "照明" , name : "x.light|照明|0~200" , valueKey : "light" } ,
					{title : "温湿度计" , name : "x.hygrothermograph|温湿度计|0~200" , valueKey : "hygrothermograph" } 
					// {title : "上下水" , name : "x.waters|上下水|0~200" , valueKey : "waters" } 
				],
				role:1,
				data : {} ,
				loading : true 
			};
		},
		props: {
			stationId: {
				type: [Number,String] ,
				default: null
			},
			type:{
				default : 1
			}
		},
		
		mounted() {
			this.role = uni.getStorageSync("role");
		},
		
		watch:{
			stationId:function(e){
				this.loadWaterInfo();
			},
		},
		
		computed:{
			showList : function(e){
				return this.tList.map(item=>{
					var color = '#000' ;
					if (this.monitorData[item.valueKey] == '故障') {
						color = '#FF9800' ;
					}
					if (this.monitorData[item.valueKey] == '无') {
						color = 'red' ;
					}
					item.color = color ;
					return item ;
				});
			},
		},
		
		methods: {
			
			toDetail(index){
				var datas = [
					'/pages/daliyRecordMenu/daliyRecordMenu?id=' + this.stationId ,
					'/pages/calibrationList/calibrationList?id=' + this.stationId ,
					`/pages/compareCheckList/compareCheckList?id=${this.stationId}&type=${this.type}`
				] ;
				uni.navigateTo({
					url:datas[index]
				});
			},
			
			loadWaterInfo:function(e){
				console.log("loadWaterInfo======== ");
				if (null == this.stationId) {
					return ;
				}
				uni.showLoading({
					title:"加载中…"
				});
				this.loadMonitorInfo();
				this.loadMaintainRecords();
				this.loadData();
				this.loadSystemData();
			},
			
			loadSystemData:function(e){
				var data = {id:this.stationId} ;
				this.kit.get("/api/sysetemParams/info",data,res => {
					this.data = res.data || {};
				});
			},
			
			loadMonitorInfo:function(e){
				var data = {
					id : this.stationId
				} ;
				this.kit.get("/api/monitoringStation/info",data,res => {
					var data = res.data ;
					this.kit.setDefault({
						data , 
						keys : "area,airConditioner,fireFalicities,regulatedPowerSupply,LightningProtection,light,hygrothermograph" 
					}) ;
					this.monitorData = data ;
					uni.hideLoading();
					this.loading = false ;
				});
			},
			
			loadMaintainRecords:function(e){
				var data = {
					id : this.stationId
				} ;
				this.kit.get("/api/maintainRecords/recentRecords",data,res => {
					this.maintainList = res.list ;	
				});
			},
			
			loadData:function(e){
				console.log("this.stationId: ",this.stationId);
				var data = {
					pageNumber : this.page.pageNumber ,
					pageSize : this.page.pageSize ,
					"stationId" : this.stationId
				} ;
				this.kit.get("/api/monitoringFactor/list",data,res => {
					if (res.page.pageNumber > 1) {
						res.page.list = this.page.list.concat(res.page.list);
					}
					this.page = res.page ;
				});
			},
			
			remove:function(item,index){
				uni.showModal({
					title:'提示',
					content:'确认删除吗？',
					confirmColor:'#3385ff',
					success : (e)=>{
						if (e.confirm) {
							var data = {
								mId : item.id ,
								stationId : item.stationId
							} ;
							this.kit.get("/api/monitoringFactor/delete",data,res => {
								this.page.list.splice(index,1);
								uni.showToast({
									title: '删除成功',
									icon : 'success'
								});
							});
						}
					}
				});
			},
		}
	}
</script>


